<template>
<div style="padding: 25px;">
	<el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
			<el-tab-pane label="过程意见" name="comments">
				<el-table :data="comments" border fit highlight-current-row style="width: 100%;"
					:cell-style="{padding:'3px'}">
					<el-table-column label="任务节点" prop="taskName" align="center" width="165px">
						<template slot-scope="scope"><span>{{ scope.row.taskName }}</span></template>
					</el-table-column>
					<el-table-column label="操作类型" prop="typeDesc" align="center" width="80px">
						<template slot-scope="scope"><span>{{ scope.row.typeDesc }}</span></template>
					</el-table-column>
					<el-table-column label="参与人" prop="userName" align="center" width="80px">
						<template slot-scope="scope"><span>{{ scope.row.userName }}</span></template>
					</el-table-column>
					<el-table-column label="时间" prop="time" align="center" width="165px">
						<template slot-scope="scope"><span>{{ scope.row.time }}</span></template>
					</el-table-column>
					<el-table-column label="意见" prop="fullMessage" align="left">
						<template slot-scope="scope"><span>{{ scope.row.fullMessage }}</span></template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
			<el-tab-pane label="流程图" name="processIntanceImage">
				<el-scrollbar><img :src="imagePath" alt="流程图"></el-scrollbar>
			</el-tab-pane>
		</el-tabs>

</div>
</template>
<script>
import {getAction,putAction} from '@/api/manage'
import {getToken} from '@/utils/auth'
 export default({
     data () {
         return {
             imagePath:'',
             comments:[],
             id:'',
             activeName:"comments"
         }
     },
     watch: {
         processInstanceId(newval,oldval){
             this.id=newval
         },
     },
    props: {
			processInstanceId: {
				type: String,
				default: function() {
					return ''
				}
			}
		},
        created () {
            this.id=this.processInstanceId

            this.listComments()
        },
     methods: {
         	handleClick(tab, event) {
			 if (tab.name == 'processIntanceImage') {
					this.showImage();
				}
			},
         	showImage() {
				if (!this.imagePath) {
					this.imagePath = `${process.env.VUE_APP_BASE_API}` +
						'/flowable/processInstanceImage?processInstanceId=' + this.processInstanceId + '&access_token=' +
						getToken() + '&time=' + new Date()
					console.log(this.imagePath)
				}
			},
         	listComments() {
				getAction('/flowable/processInstance/comments', {
					processInstanceId: this.id
				}).then(res => {
					const {
						data
					} = res
					this.comments = data;
				})
			},
     }
 })
</script>
 <style>
</style>